<template>
  <view class="center">
    <u-toast ref="uToast"></u-toast>
    <u-navbar
      :is-back="true"
      title="会员中心"
      title-color="white"
      :border-bottom="false"
      back-icon-color="white"
      :background="background"
      title-size="34"
      height="110"
    ></u-navbar>
    <view class="u-flex user-box">
      <view class="u-flex use-in">
        <view class="u-flex-1">
          <view class="content">
            <view class="header">套餐选择</view>
            <view class="container-top">
              <view class="membership-tier" v-for="item in membershipLevels" :key="item.type">
                <view class="tier-title">
                  <u-image style="padding-right: 6rpx" width="42rpx" height="42rpx" :src="item.url"></u-image>
                  <text>{{ item.name }}</text>
                </view>
                <view
                  class="tier-price"
                  @click="choosePackage(item.type)"
                  :class="{ 'tier-price-active': item.type === active, 'tier-price-nomal': item.type !== active }"
                >
                  <text class="yun">￥</text>
                  <text class="price">{{ item.price }}</text>
                  <text class="unit">/月</text>
                </view>
                <!-- 这里可以添加更多该会员等级的详情 -->
              </view>
            </view>
            <view class="count-img">
              <u-image width="100%" height="170rpx" :src="counturl"></u-image>
            </view>

            <view class="header">套餐介绍</view>
            <view class="count-img">
              <u-image width="100%" height="340rpx" :src="packageurl"></u-image>
            </view>

            <view class="table-footer">
              <view>套餐周期</view>
              <u-radio-group v-model="chooseDuration">
                <u-radio @change="radioChange" v-for="(item, index) in radiolist" :key="index" :name="item.name">
                  {{ item.name }}
                </u-radio>
              </u-radio-group>
            </view>
            <button class="confirm-btn" @click="payMent">
              确认协议并支付
              <!-- <text class="yun">￥</text>
              <text class="price">{{ totalPrice }}</text> -->
            </button>
            <view class="back">
              <checkbox-group @change="checkboxChange">
                <label>
                  <checkbox style="transform: scale(0.7)" value="agree" :checked="state" />
                  <text class="txt-xy" @tap.stop="toService">开通前确认《会员服务协议》</text>
                </label>
              </checkbox-group>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getVip, getOrder } from 'api/vip.js'
import { membershipLevels } from './utils'

export default {
  data() {
    return {
      chooseDuration: '1个月',
      radiolist: [
        { name: '1个月', value: '1' },
        { name: '3个月', value: '3' },
        { name: '半年', value: '6' },
        { name: '一年', value: '12' }
      ],
      normalChecked: false,
      active: '2',
      membershipLevels,
      packageurl: '/static/package3.jpg',
      counturl: '/static/count.png',
      rendIndex: 0,
      show: true,
      background: {
        // 导航栏背景图
        background: `url(${this.$filePath}bg.svg) no-repeat`,
        // 还可以设置背景图size属性
        backgroundSize: 'cover'
      }
    }
  },
  onLoad(options) {
    // console.log(options, 'vvvvvvv')
    if (options.type) {
      this.active = options.type
    }
  },
  onShow: function (e) {
    console.log(e, '会员页面加载!')
    // const a = wx.getLaunchOptionsSync()
    this.getuserVip()
    // this.rendIndex++
  },
  computed: {
    totalPrice() {
      return this.vipPrice * this.vipDuration
    },
    vipDuration() {
      const obj = this.radiolist.find(o => o.name === this.chooseDuration)
      return Number(obj.value)
    },
    vipPrice() {
      const obj = this.membershipLevels.find(o => o.type == this.active)
      return obj.price
    }
  },
  methods: {
    toService() {
      this.$u.route({
        url: '/pages/login/common',
        params: {
          name: 'vip'
        }
      })
    },
    checkboxChange(e) {
      this.normalChecked = !this.normalChecked
    },
    async getuserVip() {
      try {
        const { data } = await getVip()
        console.log(data, 'res')
        this.membershipLevels.forEach((e, i) => {
          e.price = data.vip[i].price
          e.level = data.vip[i].level
          e.duration = data.vip[i].duration
        })
      } catch (error) {
        console.error(error)
      }
    },
    choosePackage(name) {
      this.active = name
    },
    /**
     * @desc: 拿到产品订单
     */
    async getOder() {
      const obj = this.membershipLevels.find(o => o.type === this.active)
      try {
        const { data } = await getOrder({ type: obj.level, duration: this.vipDuration })
        return data
      } catch (error) {
        console.error(error)
      }
    },
    /**
     * @desc: 支付
     */
    async payMent() {
      if (!this.normalChecked) {
        this.$refs.uToast.show({
          title: '请先同意会员服务协议',
          icon: false,
          type: 'warning'
        })
        return
      }
      let that = this
      const obj = await this.getOder()
      console.log(obj, 'obj')
      wx.requestPayment({
        ...obj,
        success: function (res) {
          that.$refs.uToast.show({
            title: '支付成功！',
            type: 'success'
          })
          that.$u.route('/pages/center/center')
        },
        fail: function (res) {
          that.$refs.uToast.show({
            title: '支付失败！',
            type: 'error'
          })
        },
        complete: function (res) {}
      })
    }
  }
}
</script>

<style lang="scss">
.count-img {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  border: 1px solid rgba(229, 229, 229, 1);
}
.container-top {
  display: flex;
  justify-content: space-between;
}

.membership-tier {
  width: 33%; /* 或者其他宽度设置 */
  // border: 1px solid #eee; /* 边框 */
  padding: 10rpx;
  text-align: center;
}

.tier-title {
  display: flex;
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(101, 119, 133, 1);
}
.tier-price-active {
  border: 2px solid rgba(0, 119, 255, 1);
}
.tier-price-nomal {
  border: 2px solid rgba(229, 229, 229, 1);
}

.tier-price {
  margin: 14rpx 4rpx;
  padding: 40rpx 18rpx;
  color: #3a3c37;
  border-radius: 30rpx;
  box-sizing: border-box;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
  .yun {
    font-size: 34rpx;
  }
  .price {
    font-size: 35rpx;
  }
}
.ma-title {
  font-size: 30rpx;
  margin-top: 20rpx;
}
.ma-button {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #9b9c9f;
}
.center {
  .u-navbar-inner {
    margin-top: 16rpx;

    align-items: flex-start !important;
  }
}
.user-box {
  justify-content: space-between;
  background: linear-gradient(to bottom, #117aff, #0866ff);
}
.use-in {
  margin-top: 20rpx;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  width: 100%;
  overflow: hidden;

  background-color: #fff;
}

.center-nav {
  background-color: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx 0;
  border-radius: 8px;
  .tabName {
    color: #606266;
    font-size: 26rpx;
    padding-top: 10rpx;
  }
}

.content {
  padding: 36rpx;
  height: calc(100vh - 300rpx);
}

.header {
  font-size: 32rpx;
  color: rgba(58, 60, 55, 1);
  font-weight: bold;
  margin-bottom: 30rpx;
}
// 表头文字大小
.head-table {
  font-size: 24rpx;
}

.unlimited {
  color: red;
}
.confirm-btn {
  margin-top: 10px;
  background-color: #007aff;
  color: white;
  width: 70%;
  padding: 8rpx 8rpx;
  border-radius: 20rpx;
}

.table-footer {
  padding-top: 20rpx;
  display: flex;
  width: 100%;
  justify-content: space-around;
  // margin-bottom: 10px;
}

.txt-xy {
  padding: 0 8rpx;
  color: #5e81f4;
  text-decoration: underline;
}
.back {
  margin-bottom: 1000rpx;
  padding-top: 20rpx;
  color: rgba(166, 166, 166, 1);
  text-align: center;
}
</style>
